<template>
  <div class="time-content">
    <div v-show="vertical">
      <p class="date">{{timestamp | numToDate}}</p>
      <p class="time">{{timestamp | numToTime}}</p>
    </div>
    <div v-show="!vertical">
      {{timestamp | numToDate}}&nbsp;&nbsp;{{timestamp | numToTime}}
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TimeComp',
    props: {
      timestamp: {
      },
      vertical: {
        type: Boolean,
        default: false
      }
    },
    filters: {
      // 时间戳转日期
      numToDate (val) {
        return val ? new Date(Number(val)).toLocaleDateString() : ''
      },
      // 时间戳转时间
      numToTime (val) {
        if (val) {
          const date = new Date(Number(val))
          const hours = date.getHours()
          const hh = String(hours).length === 1 ? '0' + hours : hours
          const minutes = date.getMinutes()
          const mm = String(minutes).length === 1 ? '0' + minutes : minutes
          const seconds = date.getSeconds()
          const ss = String(seconds).length === 1 ? '0' + seconds : seconds
          return `${hh}:${mm}:${ss}`
        } else {
          return ''
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .time-content{
    p{
      margin: 0
    }
    .date, .time{
      text-align center;
      white-space: nowrap;
    }
  }
</style>
